<mat-sidenav-container class="flex-1">
  <mat-sidenav #sidenav [(opened)]="sidenavOpened" [mode]="isMobile() ? 'over' : 'side'" class="w-[400px]">
    <pac-chat-sidenav-menu class="w-full p-2" [sidenav]="sidenav"/>

    <div class="flex-1 p-2 overflow-auto max-h-fit"
      waIntersectionObserver
      waIntersectionThreshold="0.5"
    >
      <pac-chat-xperts />

      <mat-list>
        @for (group of groups(); track groups.name) {
          <div mat-subheader class="pt-8 text-sm font-semibold text-ellipsis overflow-hidden break-all text-token-text-primary">
            {{ 'PAC.KEY_WORDS.Date_' + group.name | translate: {Default: group.name} }}</div>
          @for (item of group.values; track item.id) {
            <mat-list-item class="pac-chat__conversation-item group cursor-pointer rounded-md hover:bg-black/5 dark:hover:bg-white/10"
              [ngClass]="{active: item.id === conversationId()}"
              [class.menu-active]="mt.isOpen()"
              (click)="selectConversation(item)"
            >
            @if (editingConversation()  === item.id) {
              <input matInput [(ngModel)]="editingTitle" (keydown.enter)="updateTitle(item)" 
                (keydown.esc)="exitEdit($event)">
            } @else {
              {{item.title || item.id}}
            }

              <div class="absolute bottom-0 top-0 items-center gap-1.5 pr-2 right-0 flex">
                <span class="" data-state="closed">
                  <button class="menu-trigger flex items-center justify-center p-1 rounded-full text-token-text-secondary transition opacity-0
                    group-hover:opacity-50 group-hover:hover:opacity-100 hover:bg-hover-bg"
                    type="button"
                    [cdkMenuTriggerFor]="convMenu"
                    [cdkMenuTriggerData]="item"
                    #mt="cdkMenuTriggerFor"
                    [class.active]="mt.isOpen()"
                    [matTooltip]="'PAC.KEY_WORDS.Options' | translate: {Default: 'Options'} "
                    matTooltipPosition="above"
                    (click)="$event.stopPropagation();">
                    <pac-chat-more-svg />
                  </button>
                </span>
              </div>
            </mat-list-item>
          }
        }
      </mat-list>

      @if (loading()) {
        <div class="flex justify-center">
          <mat-progress-spinner [diameter]="20" color="accent" mode="indeterminate" />
        </div>
      }

      <div (waIntersectionObservee)="onIntersection()" class="p-4"></div>
    </div>
  </mat-sidenav>
  <mat-sidenav-content #contentContainer class="overflow-auto">
    <router-outlet />
  </mat-sidenav-content>
</mat-sidenav-container>

<ng-template #convMenu let-id="id" let-title="title">
  <div cdkMenu class="cdk-menu__medium">
    <button cdkMenuItem (click)="editingConversation.set(id);editingTitle.set(title)">
      <i class="ri-edit-line mr-1"></i>
      {{ 'PAC.KEY_WORDS.Rename' | translate: {Default: 'Rename'} }}
    </button>

    <button cdkMenuItem class="danger" (click)="deleteConv(id)">
      <i class="ri-delete-bin-4-line mr-1"></i>
      {{ 'PAC.KEY_WORDS.Delete' | translate: {Default: 'Delete'} }}
    </button>
  </div>
</ng-template>